<template>
	<view class="z-modal">
		<uni-popup ref="zModal" type="center">
			<view class="z-modal-box">
				<image class="logo" src="https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-07/f10c1202007061012119827.png"
				 mode=""></image>
				<view class="content">
					<text v-for="(item,index) in content" :key="index">{{item}}</text>
				</view>
				<view class="btnBox">
					<view class="confirmBtn btn" @tap="hide">{{confirmText}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name: "zModal",
		components:{
			uniPopup
		},
		props: {
			// 提示内容
			content: {
				type: Array,
				default () {
					return []
				}
			},
			// 确认按钮文字
			confirmText: {
				type: String,
				default: '确定'
			}
		},

		data() {
			return {
				
			}
		},
		methods:{
			//打开提示面板
			show() {
				this.$refs.zModal.open()
			},
			//关闭提示面板
			hide() {
				this.$refs.zModal.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.z-modal{
		.z-modal-box{
			width:600rpx;
			height: 880rpx;
			padding-top: 350rpx;
			box-sizing: border-box;
			background:url(https://puhuishequ.oss-cn-beijing.aliyuncs.com/attach/2020-07/48d47202007061012115720.png) no-repeat;
			background-size: 600rpx 880rpx;
			position: relative;
			position: relative;
			.logo{
				position: absolute;
				top: 80rpx;
				left: 50%;
				margin-left: -75rpx;
				width: 150rpx;
				height: 150rpx;
			}
			
			.content{
				margin: 30rpx;
				height: 350rpx;
				font-size:26rpx;
				color:rgba(52,52,52,1);
				overflow-y: scroll;
				display: flex;
				flex-direction: column;
				text{
					margin-bottom: 20rpx;
				}
			}
			.btnBox{
				display: flex;
				justify-content: space-around;
				.btn{
					width:400rpx;
					height:80rpx;
					line-height: 80rpx;
					font-weight: 500;
					text-align: center;
					font-size: 30rpx;
					color: #fff;
					box-sizing: border-box;
					background: $theme-color;
					border-radius:40rpx;
				}
			}
		}
	}
</style>
